<template>
  <div class="soushuozujian">
    <!-- 搜索框 -->
    <div class="head" value>
      <div class="search">
        <router-link to="/cityList">
          <span>{{$store.state.nowCity.city[0]}}</span>
          <van-icon name="play" class="sanjiao" />
        </router-link>
        <van-icon class="iconfont soushuo" class-prefix="icon" name="sousuo" />
        <input type="text" placeholder="请输入小区或地址" />
      </div>
              <router-link to="/HouseMap">
      <van-icon class="iconfont map" class-prefix="icon" name="dituzhaofang" />
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HkHouseSearch',

  data () {
    return {}
  },

  created () {
    this.name()
  },

  methods: {
    name () {
      // console.log(this.$store.state.CityList.nowCity)
      return this.$store.state.CityList.nowCity[0]
    }
  }
}
</script>

<style lang="less" scoped>
.soushuozujian {
  background-color: #f6f5f6;
  // 相对定位 为了下面搜索框
  position: relative;
  // 开启flex 让内容居中
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // height: 64px;
  // background-color: #9a9a9c;
  .head {
    // 开启绝对定位
    position: absolute;
    top: 25px;
    z-index: 10;
    // 开启flex布局 使其内容居中
    display: flex;
    align-items: center;
    text-align: center;
    margin: 0 10px;
    // 搜索框
    .search {
      position: relative;
      flex: 1;
      width: 310px;
      height: 34px;
      // 开启flex布局 使其内容居中
      display: flex;
      align-items: center;
      text-align: center;
      // 圆角
      border-radius: 3px;
      // 设置颜色
      background-color: #ffffff;
      // 设置内边距
      padding: 5px 5px 5px 8px;
      // *地区
      span {
        color: #333;
        width: 28px;
        font-size: 14px;
      }
      // *三角
      .sanjiao {
        font-size: 12px;
        transform: rotate(90deg);
        margin-top: 1px;
        color: #9a9a9c;
      }
      // *搜索框
      input {
        width: 138px;
        border-left: 1px solid #c9c6c6;
        height: 17px;
        margin-left: 12px;
      }
      // 提示文本
      ::placeholder {
        padding-left: 31px;
        color: #9c9fa1;
        font-size: 13px;
      }
      .soushuo {
      position: absolute;
      left: 72px;
      font-size: 15px;
      margin-top: 5px;
    }
  }
    .map {
      margin-left: 10px;
      font-size: 16px;
      color: #fff;
      border: 2.5px solid #fff;
      padding: 2.5px;
      border-radius: 50%;
    }
}
}
</style>
